import React,{useState} from 'react'
import { Toast, NavBar ,ProductCard, Checkbox,SubmitBar ,Badge,Dialog , Button } from 'react-vant';
import { useDispatch ,useSelector } from 'react-redux';
import { INPSHOP,STORETYPE,ALLINPSHOP,PRVEBTN ,NEXTBTN,CLEARBTN} from '../../Type/Store.d';
import { DeleteO ,} from '@react-vant/icons';
function Shop() {
    const Dispatch = useDispatch();
    const shopList = useSelector((state:STORETYPE) => state.shopList);
    const [visible, setVisible] = useState(false);
    return (
        <div className='Shop'>
            <NavBar
                title="购物车"
                leftText="返回"
                rightText={ <Badge content={(useSelector((state:STORETYPE)=>state.shopList)).filter(item=>item.flag).length}><DeleteO  fontSize={20} /></Badge>}
                onClickLeft={() => Toast('返回')}
                onClickRight={() => {setVisible(true)}}
            />
            <main>
                {
                    shopList && shopList.length>0 ? shopList.map((item,index)=>{
                        return <div key={index} style={{ display:'flex',width: '100%', }}>
                                <Checkbox checked={item.flag} onChange={()=>{
                                    Dispatch({
                                        type:INPSHOP,
                                        payload:item.id
                                    })
                                }}></Checkbox>
                                <ProductCard 
                                    price={item.price}
                                    title={item.txt}
                                    thumb={item.src}
                                    footer={
                                    <>
                                    <Button size="mini" round plain style={{ marginRight: 2,padding:10 }} onClick={()=>{
                                        Dispatch({
                                            type:PRVEBTN,
                                            payload:item.id
                                        })
                                    }}> - </Button>
                                    <span style={{ padding:10 }}>{item.count}</span>
                                    <Button size="mini" round plain style={{ padding:10 }} onClick={()=>{
                                        Dispatch({
                                            type:NEXTBTN,
                                            payload:item.id
                                        })
                                    }}> +</Button>
                                    </>
                                    }
                                />
                        </div>
                    }):'暂无数据'
                }
                
            </main>
            <footer>
            <SubmitBar
                price={useSelector((state:STORETYPE)=>state.SumPrice) * 100}
                buttonText="提交订单">
                <Checkbox checked={useSelector((state:STORETYPE)=>state.AllInpFlag)} onChange={(e)=>{
                    Dispatch({
                        type:ALLINPSHOP,
                        payload:e
                    })
                }}>全选</Checkbox>
            </SubmitBar>
            </footer>

            <Dialog
                visible={visible}
                title="确定删除此商品吗？"
                showCancelButton
                onConfirm={() => {
                    Toast.info('点击确认按钮');
                    setVisible(false);
                    Dispatch({
                        type:CLEARBTN,
                        payload:''
                    })
                }}
                onCancel={() => setVisible(false)}
            >
            </Dialog>
        </div>
    )
}

export default Shop